<template>
  <view class="container">
<view class="container-box">
	<!-- 支付成功图标或提示 -->
	<view class="success-icon">
	  <image src="/static/success-icon.png" mode="aspectFit"></image>
	  <text class="success-text">支付成功！</text>
	</view>
	
	<!-- 订单详情 -->
	<view class="order-details">
	  <view class="detail-item">
	    <text class="detail-label">购买金额：</text>
	    <text class="detail-value">¥{{ order.amount }}</text>
	  </view>
	  <view class="detail-item">
	    <text class="detail-label">订单编号：</text>
	    <text class="detail-value">{{ order.orderId }}</text>
	  </view>
	  <view class="detail-item">
	    <text class="detail-label">下单时间：</text>
	    <text class="detail-value">{{ order.orderTime }}</text>
	  </view>
	  <view class="detail-item">
	    <text class="detail-label">订单状态：</text>
	    <text class="detail-value" :class="order.statusClass">{{ order.status }}</text>
	  </view>
	</view>
</view>

    <!-- 其他操作或提示，如返回首页、查看订单等 -->
    <view class="operations">
      <button class="operation-button" @click="goHome">返回首页</button>
      <button class="operation-button" @click="viewOrder">查看订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {
        amount: 100.00, // 购买金额
        orderId: '1234567890', // 订单编号
        orderTime: '2025-02-17 12:00:00', // 下单时间
        status: '已支付', // 订单状态
        statusClass: 'status-paid' // 订单状态对应的样式类
      }
    };
  },
  methods: {
    goHome() {
      // 跳转到首页的逻辑
      uni.switchTab({
        url: '/pages/home/index'
      });
    },
    viewOrder() {
      // 跳转到订单详情页的逻辑
      uni.navigateTo({
        url: `/pages/orderDetail/orderDetail?orderId=${this.order.orderId}`
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
  /* background-color: #f5f5f5; */
  text-align: center;
}
.container-box {
	margin-bottom: 150rpx;
	padding: 20rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 14rpx 26rpx 0rpx rgba(0,150,255,0.13);
}
.success-icon {
  margin-bottom: 20px;
}

.success-icon image {
  width: 60px;
  height: 60px;
}

.success-text {
  margin-top: 10px;
  font-size: 20px;
  color: #333;
}

.order-details {
  margin-bottom: 20px;
  text-align: left;
}

.detail-item {
  margin-bottom: 10px;
}

.detail-label {
  font-size: 14px;
  color: #666;
}

.detail-value {
  font-size: 16px;
  color: #333;
}

.status-paid {
  color: green;
}

.operations {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.operation-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007aff;
  border-radius: 5px;
}
</style>
